import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {animate, state, style, transition, trigger} from "@angular/animations";
import {MaskService} from "./mask.service";
import {GlobalEvent} from "../../../support/event.definition";
import {AppService} from "../../../app.service";

@Component({
  selector: 'ss-platform-mask',
  template: '<div class="ss-platform-mask" [class.gray]="isGray" [@mask] *ngIf="isDisplay"></div>',
  styleUrls: ['./mask.component.scss'],
  animations: [
    trigger("mask", [
      state("void", style({opacity: 0})),
      state("*", style({opacity: .7})),
      transition("void <=> *", animate(200))
    ])
  ],
  host: {class: "ss-platform-mask-wraper"},
  encapsulation: ViewEncapsulation.None
})
export class MaskComponent implements OnInit {
  isDisplay: boolean = false;
  isGray: boolean = false;

  constructor(private $app: AppService, public service: MaskService) {
    // 显示
    this.$app.subscribe([GlobalEvent.ShowMask, GlobalEvent.ShowMaskGray], (eventName, data, resolve) => {
      this.isDisplay = true;
      this.isGray = eventName === GlobalEvent.ShowMaskGray;
      resolve(this);
    });
    // 隐藏
    this.$app.subscribe(GlobalEvent.HideMask, () => {
      this.isDisplay = false;
    });
  }

  ngOnInit(): void {
  }

}
